본문으로 건너뛰기

Fragment가 필요한 경우와 필요하지 않은 경우

React에서 컴포넌트를 작성하다 보면, 여러 요소를 반환해야 할 때가 있습니다. 이때 부모 요소 없이 여러 요소를 반환하려면 Fragment를 사용할 수 있습니다. Fragment는 불필요한 DOM 요소를 추가하지 않고 그룹화된 요소를 렌더링할 수 있게 해줍니다.

Fragment의 필요성​

React에서는 컴포넌트가 하나의 루트 요소만을 반환할 수 있습니다. 예를 들어, 다음과 같은 컴포넌트는 오류를 발생시킵니다:

function MyComponent() {
  return (
    <div>Hello</div>
    <div>World</div>
  );
}

이 오류를 해결하려면 부모 요소로 둘러싸야 합니다. 보통은 <div>를 사용하지만, 불필요한 <div> 요소가 추가됩니다. 이런 경우 Fragment가 유용합니다.

function MyComponent() {
  return (
    <React.Fragment>
      <div>Hello</div>
      <div>World</div>
    </React.Fragment>
  );
}

또는 더 간단하게 <></>를 사용할 수도 있습니다:

function MyComponent() {
  return (
    <>
      <div>Hello</div>
      <div>World</div>
    </>
  );
}

Fragment가 필요한 경우​

1. 불필요한 DOM 요소를 피하고 싶을 때​

예를 들어, CSS 그리드 레이아웃을 사용할 때 불필요한 부모 <div>가 레이아웃을 깨뜨릴 수 있습니다. 이때 Fragment를 사용하면 구조를 깨지 않고 여러 요소를 반환할 수 있습니다.

function GridComponent() {
  return (
    <>
      <div className="item">Item 1</div>
      <div className="item">Item 2</div>
      <div className="item">Item 3</div>
    </>
  );
}

2. 리스트를 렌더링할 때​

리스트를 렌더링할 때 Fragment를 사용하면 리스트 아이템을 감싸는 추가 요소를 피할 수 있습니다.

function ListComponent({ items }) {
  return (
    <ul>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <li>{item.name}</li>
        </React.Fragment>
      ))}
    </ul>
  );
}

Fragment가 필요하지 않은 경우​

1. 단일 요소를 반환할 때​

단일 요소를 반환하는 경우에는 Fragment가 필요 없습니다.

function SingleElementComponent() {
  return <div>Hello World</div>;
}

2. 불필요한 그룹화를 피하고자 할 때​

가끔 여러 요소를 그룹화할 필요가 없고, 그냥 하나의 요소만 반환하면 충분한 경우가 있습니다. 이때는 Fragment가 필요하지 않습니다.

주의사항​

  • Fragment는 키(key)를 사용할 수 있습니다. 리스트 아이템에 키가 필요한 경우 유용합니다.
  • 빈 태그 <>는 속성을 가질 수 없습니다. 속성이 필요한 경우 React.Fragment를 사용해야 합니다.

더 알아보기​

  • JSX 문법: JSX의 기본 개념과 문법에 대해 알아보세요.
  • React 컴포넌트: React 컴포넌트와 props에 대해 더 깊이 이해해 보세요.
  • React Fragment: 공식 문서를 통해 Fragment에 대해 자세히 알아보세요.

내용 요약과 다음 주제​

Fragment는 여러 요소를 그룹화할 때 불필요한 DOM 요소를 추가하지 않도록 도와줍니다. 주로 레이아웃이 중요한 경우나 리스트를 렌더링할 때 유용합니다. 다음 주제인 컴포넌트 함수로 JSX 반환에서는 컴포넌트 함수가 JSX를 반환하는 방법과 이와 관련된 다양한 패턴에 대해 알아보겠습니다.